<template>
  <el-card>
    <el-form ref="form" label-width="80px" size="small" :model="form">
      <el-row
        ><el-form-item style="text-align: right"
          ><el-button
            type="success"
            icon="el-icon-edit"
            size="small"
            style="margin-bottom: 10px"
            @click="$router.push('new')"
            >新增试题</el-button
          ></el-form-item
        ></el-row
      >
      <el-row>
        <el-col :span="6"
          ><el-form-item label="学科">
            <el-select
              v-model="form.subjectID"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in subject"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              >
              </el-option> </el-select></el-form-item
        ></el-col>
        <el-col :span="6"
          ><el-form-item label="二级目录">
            <el-select
              v-model="form.catalogID"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in twoLevelDirectory"
                :key="index"
                :value="item.value"
                :label="item.label"
              >
              </el-option> </el-select></el-form-item
        ></el-col>
        <el-col :span="6"
          ><el-form-item label="标签">
            <el-select
              v-model="form.tags"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in tags"
                :key="index"
                :value="item.value"
                :label="item.label"
              >
              </el-option> </el-select></el-form-item
        ></el-col>
        <el-col :span="6"
          ><el-form-item label="关键字">
            <el-input
              v-model="form.keyword"
              style="width: 100%"
            ></el-input></el-form-item
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="6"
          ><el-form-item label="试题类型">
            <el-select
              v-model="form.questionType"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in questionType"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              >
              </el-option> </el-select></el-form-item
        ></el-col>
        <el-col :span="6"
          ><el-form-item label="难度">
            <el-select
              v-model="form.difficulty"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in difficulty"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              >
              </el-option> </el-select></el-form-item
        ></el-col>
        <el-col :span="6"
          ><el-form-item label="方向">
            <el-select
              v-model="form.direction"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in direction"
                :key="item"
                :value="item"
                :label="item"
              >
              </el-option> </el-select></el-form-item
        ></el-col>
        <el-col :span="6"
          ><el-form-item label="录入人">
            <el-select
              v-model="form.creatorID"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in creatorID"
                :key="item.id"
                :value="item.id"
                :label="item.username"
              >
              </el-option> </el-select></el-form-item
        ></el-col>
      </el-row>
      <el-row>
        <el-col :span="6"
          ><el-form-item label="题目备注">
            <el-input
              v-model="form.remarks"
              style="width: 100%"
            ></el-input></el-form-item
        ></el-col>
        <el-col :span="6"
          ><el-form-item label="企业简称">
            <el-input
              v-model="form.shortName"
              style="width: 100%"
            ></el-input></el-form-item
        ></el-col>

        <el-col :span="6">
          <el-form-item label="城市">
            <el-select
              v-model="form.province"
              placeholder="请选择"
              style="width: 48%"
            >
              <el-option
                v-for="(item, index) in province"
                :key="index"
                :value="item"
                :label="item"
              >
              </el-option>
            </el-select>

            <el-select
              v-model="form.city"
              collapse-tags
              style="margin-left: 2%; width: 50%"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in city"
                :key="index"
                :value="item"
                :label="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6"
          ><el-form-item style="text-align: right">
            <el-button @click="clear">清除</el-button>
            <el-button type="primary" @click="searchSubject">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 导航标签 -->
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="全部" name="total"></el-tab-pane>
      <el-tab-pane label="待审核" name="ready"></el-tab-pane>
      <el-tab-pane label="已审核" name="already"></el-tab-pane>
      <el-tab-pane label="已拒绝" name="reject"></el-tab-pane>
    </el-tabs>
    <!-- 提示信息 -->
    <el-alert title="" type="info" show-icon>数据一共{{ total }}条 </el-alert>
    <!-- 表格 -->

    <el-table :data="list" style="width: 100%">
      <el-table-column prop="number" label="试题编号" width="120px">
      </el-table-column>
      <el-table-column prop="subject" label="学科" width="120px">
      </el-table-column>
      <el-table-column prop="catalog" label="目录" width="120px">
      </el-table-column>
      <el-table-column prop="questionType" label="题型" width="120px">
        <template #default="{ row }">
          <span>{{ row.questionType | formatType }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="question" label="题干" width="280px">
        <template #default="{ row }">
          <span v-html="row.question"></span>
        </template>
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="180px">
        <template #default="{ row }"> {{ row.addDate | formatTime }} </template>
      </el-table-column>
      <el-table-column prop="difficulty" label="难度" width="120px">
        <template #default="{ row }">
          <span>{{ row.difficulty | formatDiff }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="120px">
      </el-table-column>
      <el-table-column prop="chkState" label="审核状态" width="120px">
        <template #default="{ row }">
          <span>{{ row.chkState | formatState }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="chkRemarks" label="审核意见" width="150px">
      </el-table-column>
      <el-table-column prop="chkUser" label="审核人" width="120px">
      </el-table-column>
      <el-table-column prop="publishState" label="发布状态" width="150px">
        <template #default="{ row }">
          <span>{{ row.publishState | formatPublish }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="220px" align="center">
        <template #default="{ row }">
          <el-button type="text" @click="preview(row.id)">预览</el-button>
          <el-button
            :disabled="row.chkState === 1"
            type="text"
            @click="check(row.id)"
            >审核</el-button
          >
          <el-button :disabled='row.publishState===1' type="text" @click="$router.push(`new?id=${row.id}`)">修改</el-button>
          <el-button type="text" @click="changeState(row)">
            {{row.publishState===1?'下架':'上架'}}
          </el-button>
          <el-button type="text" @click="del(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[1, 2, 4, 5]"
      :page-size="pagesize"
      background
      layout="  prev, pager, next,sizes, jumper"
      :total="total"
      class="fr"
      style="margin-top: 20px"
    >
    </el-pagination>
    <questions-preview
      :showPreview.sync="showPreview"
      :questionInfo="questionInfo"
    ></questions-preview>
    <questions-check :showCheck.sync="showCheck" :data='questionInfo' @updateList='getQuestionList'></questions-check>
  </el-card>
</template>

<script>
import { choice, detail as questionDetail, choicePublish, remove } from '@/api/hmmm/questions.js'
import dayjs from 'dayjs'
import { simple } from '@/api/hmmm/subjects.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { simple as simpleuser } from '@/api/base/users.js'
import { simple as dirListGet } from '@/api/hmmm/directorys'
import { simple as tagList } from '@/api/hmmm/tags'
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
import QuestionsCheck from '../components/questions-check.vue'
import QuestionsPreview from '../components/questions-preview3.vue'
const chkType = [
  {
    value: 0,
    label: '待审核'
  },
  {
    value: 1,
    label: '通过'
  },
  {
    value: 2,
    label: '拒绝'
  }
]
const publishType = [
  {
    value: 0,
    label: '待发布'
  },
  {
    value: 1,
    label: '已发布'
  },
  {
    value: 2,
    label: '已下架'
  }
]
export default {
  data () {
    return {
      value: [],
      activeName: 'total',
      list: [],
      page: 1,
      pagesize: 2,
      total: 0,
      subject: [],
      twoLevelDirectory: [],
      tags: [],
      creatorID: [],
      province: [],
      city: [],
      questionType: questionType,
      difficulty: difficulty,
      direction: direction,
      showPreview: false,
      showCheck: false,
      questionInfo: {},
      checkData: {},
      form: {
        subjectID: null,
        catalogID: null,
        tags: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        province: null,
        city: null,
        chkState: null
      }
    }
  },
  components: {
    QuestionsCheck,
    QuestionsPreview
  },
  created () {
    this.getQuestionList()
    this.getSubject()
    this.getProvince()
    this.getUser()
  },
  watch: {
    'form.subjectID': {
      deep: true,
      handler: function (val) {
        console.log(val, 111)
        this.changeSubject(val)
      }
    },
    'form.province': {
      deep: true,
      handler: function (val) {
        this.getCity(val)
      }
    }
  },
  computed: {},
  filters: {
    formatTime (date) {
      return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
    },
    formatDiff (data) {
      if (data) return difficulty.find((item) => item.value === +data).label
      // console.log(diff, 123)
    },
    formatType (data) {
      if (data) return questionType.find((item) => item.value === +data).label
    },
    formatState (data) {
      return chkType.find((item) => item.value === +data).label
    },
    formatPublish (data) {
      return publishType.find((item) => item.value === +data).label
    }
  },
  methods: {
    handleClick (tab, event) {
      console.log(tab, event)
      if (tab.label === '全部') {
        this.form.chkState = null
        this.getQuestionList()
      }
      if (tab.label === '待审核') {
        this.form.chkState = 0
        this.getQuestionList()
      }
      if (tab.label === '已审核') {
        this.form.chkState = 1
        this.getQuestionList()
      }
      if (tab.label === '已拒绝') {
        this.form.chkState = 2
        this.getQuestionList()
      }
    },
    async getQuestionList () {
      const { data } = await choice({
        page: this.page,
        pagesize: this.pagesize,
        ...this.form
      })
      console.log(data, 999)
      this.list = data.items
      this.page = +data.page
      this.pagesize = +data.pagesize
      this.total = data.counts
    },
    handleSizeChange (val) {
      this.pagesize = val
      this.page = 1
      this.getQuestionList()
    },
    handleCurrentChange (val) {
      this.page = val
      this.getQuestionList()
    },
    async getSubject () {
      const { data } = await simple()
      this.subject = data
      // console.log(this.subject, 888)
    },
    /* async getTwoLevelDirectory (id) {
      const res = await detail({ id })
      console.log(res, 777)
      // this.twoLevelDirectory = res.data.twoLevelDirectory
      // this.tags = res.data.tags
    }, */
    async changeSubject (subjectID) {
      this.form.catalogID = null
      this.form.tags = null
      if (subjectID) {
        // 获取目录
        const { data: directoryArr } = await dirListGet({ subjectID })
        this.twoLevelDirectory = directoryArr
        // 标签下拉选项
        const { data: tagArr } = await tagList({ subjectID })
        this.tags = tagArr
      } else {
        this.twoLevelDirectory = []
        this.tags = []
      }
    },
    async getUser () {
      const { data } = await simpleuser()
      // console.log(data, 666)
      this.creatorID = data
    },
    getProvince () {
      const res = provinces()
      // console.log(res, 222)
      this.province = res
    },
    getCity (pname) {
      const res = citys(pname)
      this.city = res
    },
    searchSubject () {
      this.page = 1
      console.log(this.form)
      this.getQuestionList()
    },
    clear () {
      this.$refs.form.resetFields()
      this.page = 1
      this.pagesize = 2
      this.form = {
        subjectID: null,
        catalogID: null,
        tags: null,
        keyword: null,
        questionType: null,
        difficulty: null,
        direction: null,
        creatorID: null,
        remarks: null,
        shortName: null,
        province: null,
        city: null,
        chkState: null
      }
      this.getQuestionList()
    },
    async preview (id) {
      const { data } = await questionDetail({ id })
      console.log(data, 9527)
      this.questionInfo = data
      this.$nextTick(() => {
        this.showPreview = true
      })
    },
    async check (id) {
      const { data } = await questionDetail({ id })
      console.log(data, 9527)
      this.questionInfo = data
      this.$nextTick(() => {
        this.showCheck = true
      })
    },
    async changeState (data) {
      await this.$confirm(`您确认${data.publishState === 1 ? '下架' : '上架'}这道题目吗？`, '提示', { type: 'warning' })
      data.publishState = data.publishState === 1 ? 0 : 1
      await choicePublish(data)
      this.$message.success('操作成功')
      this.getQuestionList()
    },
    del (id) {
      this.$confirm('此操作将永久删除该题目,是否继续？', '提示', { type: 'warning' }).then(async () => {
        await remove({ id })
        this.$message.success('删除成功！')
        if (this.list.length === 1 && this.page > 1) {
          this.page--
        }
        this.getQuestionList()
      })
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-alert__icon.is-big {
  font-size: 20px !important;
  width: 20px !important;
}
</style>
